html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  background-color: #1e2759;
}

$colorlist: (#1abc9c, #2ecc71, #3498db, #9b59b6, #f1c40f, #e67e22, #e74c3c);
$borderradiusnum: 10px;

.container {
  margin: auto;
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    border-radius: $borderradiusnum;
    box-shadow: 0 5px 25px rgba($color: #000000, $alpha: 0.5);
    .item {
      position: relative;
      color: #fff;
      cursor: pointer;
      .iconfont {
        display: block;
        position: relative;
        z-index: 2;
        padding: 20px 40px;
        opacity: 0.5;
        font-size: 20px;
        transition: all 0.2s;
      }
      .bg-cricle {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 40px;
        border-radius: $borderradiusnum;
        transition: all 0.3s;
        opacity: 0;
        z-index: 1;
      }
      &:hover {
        .iconfont {
          backdrop-filter: blur(20px);
          opacity: 1;
        }
        .bg-cricle {
          opacity: 1;
        }
      }
      &:first-child {
        .iconfont {
          border-radius: $borderradiusnum 0 0 $borderradiusnum;
        }
      }
      &:last-child {
        .iconfont {
          border-radius: 0 $borderradiusnum $borderradiusnum 0;
        }
      }

      @for $i from 1 through 7 {
        &:nth-child(#{$i}) {
          .bg-cricle {
            background-color: nth($list: $colorlist, $n: $i);
            box-shadow: 0 0 20px nth($list: $colorlist, $n: $i),
              0 0 35px nth($list: $colorlist, $n: $i),
              0 0 10px nth($list: $colorlist, $n: $i),
              0 0 35px nth($list: $colorlist, $n: $i);
          }
        }
      }
    }
  }
}
